﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <link href="todos.css" rel="stylesheet" type="text/css" />

    <script src="../../js/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="../Others/Underscore/underscore.js" type="text/javascript"></script>
    <script src="backbone.js" type="text/javascript"></script>
    <script src="backbone.localStorage.js" type="text/javascript"></script>
    <script src="todos.js" type="text/javascript"></script>

    <script type="text/javascript">

        function test2() {

            // Todo Model
            // 基础 **Todo** model 拥有 `title`, `order`, 和 `done` 属性.
            var Todo = Backbone.Model.extend({

                // todo的默认属性.
                defaults: {
                    title: "empty todo...",
                    done: false
                },

                // 保证每个model创建的时候都有`title`.
                initialize: function () {
                    if (!this.get("title")) {
                        this.set({
                            "title": this.defaults.title
                        });
                    }
                },
                // 切换`done`状态.
                toggle: function () {
                    this.save({
                        done: !this.get("done")
                    });
                },
                // 将Todo从*localStorage*和视图中删除.
                clear: function () {
                    this.destroy();
                }
            });

            // Todo 列表
            // ---------------

            // 列表存储在*localStorage*中，代替存储在服务器中
            var TodoList = Backbone.Collection.extend({

                // 关联列表的 model.
                model: Todo,

                // 以`"todos"`名字空间保存所有Todo.
                localStorage: new Store("todos-backbone"),  //new Backbone.LocalStorage

                // 过滤已完成的Todo.
                done: function () {
                    return this.filter(function (todo) {
                        return todo.get('done');
                    });
                },
                // 过滤列表，保留未完成的Todo.
                remaining: function () {
                    return this.without.apply(this, this.done());
                },
                // 尽管我们在localStorage中是无序存储的，但是我们还是按顺序读取和保存的
                nextOrder: function () {
                    if (!this.length)
                        return 1;
                    return this.last().get('order') + 1;
                },
                // 按照原来的顺序保存.
                comparator: function (todo) {
                    return todo.get('order');
                }
            });

            // 创建一个全局列表 **Todos**.
            var Todos = new TodoList;

            // Todo Item View
            // --------------

            // todo item的DOM元素
            var TodoView = Backbone.View.extend({

                //列表标签.
                tagName: "li",

                // 为单个元素缓存模板.
                template: _.template($('#item-template').html()),

                // 单个元素的DOM事件.
                events: {
                    "click .toggle": "toggleDone",
                    "dblclick .view": "edit",
                    "click a.destroy": "clear",
                    "keypress .edit": "updateOnEnter",
                    "blur .edit": "close"
                },

                // TodoView视图监听 model的事件变化,重新渲染, **Todo** 和 **TodoView** 成一一对应的关系.
                initialize: function () {
                    this.model.bind('change', this.render, this);
                    this.model.bind('destroy', this.remove, this);
                },
                // 重新渲染单条todo的title.
                render: function () {
                    var $el = $(this.el);
                    $el.html(this.template(this.model.toJSON()));
                    $el.toggleClass('done', this.model.get('done'));

                    this.input = this.$('.edit');
                    return this;
                },
                // 切换model的`"done"`状态.
                toggleDone: function () {
                    this.model.toggle();
                },
                // 切换视图为`"editing"`,显示输入框.
                edit: function () {
                    $(this.el).addClass("editing");
                    this.input.focus();
                },
                // 关闭`"editing"`视图, 保存改变数据到Todo.
                close: function () {
                    var value = this.input.val().trim();

                    if (!value)
                        this.clear();

                    this.model.save({
                        title: value
                    });
                    $(this.el).removeClass("editing");
                },
                // 如果输入 `enter`回车键, 保存编辑项目.
                updateOnEnter: function (e) {
                    if (e.keyCode == 13)
                        this.close();
                },
                // 移除单条Todo，销毁model.
                clear: function () {
                    this.model.clear();
                }
            });

            // The Application
            // ---------------

            // **AppView**是最外层层UI.
            var AppView = Backbone.View.extend({

                // 使用页面上已有的HTML结构.
                el: $("#todoapp"),

                // app底部统计的模板.
                statsTemplate: _.template($('#stats-template').html()),

                // 为新建Todo和清除已完成Todo创建事件代理.
                events: {
                    "keypress #new-todo": "createOnEnter",
                    "click #clear-completed": "clearCompleted",
                    "click #toggle-all": "toggleAllComplete"
                },

                // 初始化的时候绑定 `Todos`列表的事件，add事件会添加到 *localStorage*.
                initialize: function () {

                    this.input = this.$("#new-todo");
                    this.allCheckbox = this.$("#toggle-all")[0];

                    Todos.bind('add', this.addOne, this);
                    Todos.bind('reset', this.addAll, this);
                    Todos.bind('all', this.render, this);

                    this.$footer = this.$('footer');
                    this.$main = $('#main');

                    Todos.fetch();
                },
                // 重新渲染只是刷新统计，其他不变.
                render: function () {
                    var done = Todos.done().length;
                    var remaining = Todos.remaining().length;

                    if (Todos.length) {
                        this.$main.show();
                        this.$footer.show();

                        this.$footer.html(this.statsTemplate({
                            done: done,
                            remaining: remaining
                        }));
                    } else {
                        this.$main.hide();
                        this.$footer.hide();
                    }

                    this.allCheckbox.checked = !remaining;
                },
                // 添加一个Todo项，并插入到`<ul>`中.
                addOne: function (todo) {
                    var view = new TodoView({
                        model: todo
                    });
                    this.$("#todo-list").append(view.render().el);
                },
                // 一次把所有的Todo添加到 **Todos** 列表中.
                addAll: function () {
                    Todos.each(this.addOne);
                },
                // 新建一个Todo赋予属性.
                newAttributes: function () {
                    return {
                        title: this.input.val().trim(),
                        order: Todos.nextOrder(),
                        done: false
                    };
                },
                // 在input中按回车键会新建一个**Todo** model并且保存到*localStorage*.
                createOnEnter: function (e) {
                    if (e.keyCode != 13)
                        return;
                    if (!this.input.val().trim())
                        return;

                    Todos.create(this.newAttributes());
                    this.input.val('');
                },
                // 清除所有已完成Todo models.
                clearCompleted: function () {
                    _.each(Todos.done(), function (todo) {
                        todo.clear();
                    });
                    return false;
                },
                toggleAllComplete: function () {
                    var done = this.allCheckbox.checked;
                    Todos.each(function (todo) {
                        todo.save({
                            'done': done
                        });
                    });
                }
            });

            // 创建一个 **App**.
            var App = new AppView;
        };


        jQuery(document).ready(function () {

            var Sidebar = Backbone.Model.extend({
                promptColor: function () {
                    var cssColor = prompt("Please enter a CSS color:");
                    this.set({ color: cssColor });
                }
            });

            var sidebar = new Sidebar;

            sidebar.on('change:color', function (model, color) {
                $('#sidebar').css({ background: color });
            });

            sidebar.set({ color: 'white' });

            sidebar.promptColor();
        
        });

    </script>

</head>
<body>
    
    <div id="sidebar" style=" width:150px; height:100px; z-index:1; position:fixed; top: 100px; right:100px;"></div>


  <div id="todoapp">
    
    <header>
      <h1>Todos</h1>
      <input id="new-todo" type="text" placeholder="What needs to be done?">
    </header>

    <section id="main">
      <input id="toggle-all" type="checkbox">
      <label for="toggle-all">Mark all as complete</label>
      <ul id="todo-list"></ul>
    </section>

    <footer>
      <a id="clear-completed">Clear completed</a>
      <div id="todo-count"></div>
    </footer>
    
  </div>

  <!-- Templates -->

  <script type="text/template" id="item-template">
    <div class="view">
      <input class="toggle" type="checkbox" <%= done ? 'checked="checked"' : '' %> />
      <label><%- title %></label>
      <a class="destroy"></a>
    </div>
    <input class="edit" type="text" value="<%= title %>" />
  </script>

  <script type="text/template" id="stats-template">
    <% if (done) { %>
      <a id="clear-completed">Clear <%= done %> completed <%= done == 1 ? 'item' : 'items' %></a>
    <% } %>
    <div class="todo-count"><b><%= remaining %></b> <%= remaining == 1 ? 'item' : 'items' %> left</div>
  </script>

</body>
</html>
